<template>
  <div class="md-paragraph" v-html="html"></div>
</template>

<script>
import { getSelectionText } from "@/js/selection.js";
import { NoteScope } from "@/js/constants.js";

export default {
  props: ["html", "highlight"],
  data() {
    return {
      NoteScope: NoteScope,
    };
  },
  created() {
    //console.log("rendering html: ", this.html);
  },
  mounted() {
    let lines = this.$el.getElementsByClassName("line");
    for (let line of lines) {
      // 在每行内容之前添加一个统计块。TODO：是不是放到MaterialContent里更好
      this.addStatsSpan(line);
      // 给每句话添加一个选中事件
      this.addClickListener(line);
    }
  },
  methods: {
    addStatsSpan(line) {
      let stat = document.createElement("span");
      stat.classList.add("line-stat");
      let parent = line.parentNode;
      if (parent.lastChild == line) {
        parent.appendChild(stat);
      } else {
        parent.insertBefore(stat, line.nextSibling);
      }
    },
    getWordSelection() {
      let sel = window.getSelection();
      let startspan = sel.anchorNode;
      let endspan = sel.focusNode;
      if (startspan == endspan) {
        let line = this.findParentSent(startspan);
        // 正好在同一个span中
        let senttext = line.textContent;
        let seltext = sel.toString();
        let spos = senttext.indexOf(seltext);
        return {
          el: line,
          spos: spos,
          epos: spos + seltext.length,
          text: seltext,
        };
      } else {
        // 需要找寻共同的祖先节点。
        let startSent = this.findParentSent(startspan);
        let endSent = this.findParentSent(endspan);
        console.log("parents:", startSent, endSent);
        if (startSent == null || endSent == null || startSent != endSent) {
          // TODO: 用更合适的形式来避免跨句选择。
          console.log("暂不支持跨句笔记！请重新选择一句话之内的词语！");
          return {
            el: sel.anchorNode,
            spos: 0,
            epos: 0,
            text: "",
          };
        } else {
          let line = startSent.textContent;
          let seltext = sel.toString();
          let spos = line.indexOf(seltext);
          return {
            el: line,
            spos: spos,
            epos: spos + seltext.length,
            text: seltext,
          };
        }
      }
    },
    findParentSent(span) {
      if (span.nodeType == 3) {
        span = span.parentNode;
      }
      if (span.classList.contains("line")) {
        return span;
      } else {
        let parent = span.parentNode;
        while (!parent.classList.contains("line")) {
          parent = parent.parentNode;
        }
        return parent;
      }
    },
    getNoteSelection(noteSpan) {
      let lineSpan = noteSpan.parentElement;
      let sel = {};
      let len = 0;
      for (let node of lineSpan.childNodes) {
        console.log("node:", node)
        sel.spos = len;
        len += node.textContent.length;
        sel.epos = len;
        if (node === noteSpan) {
          break;
        }
      }
      if (noteSpan.classList.contains("pinyin")) {
        sel.text = noteSpan.firstChild.textContent;
      } else {
        sel.text = noteSpan.textContent;
      }
      return sel;
    },
    addClickListener(line) {
      let linenum = line.getAttribute("linenum");
      let self = this;
      line.onclick = (event) => {
        console.log("event target:", event.target);
        let sel = {};
        if (event.target !== line) {
          // 内部元素，比如单词注释等
          let tgt = event.target;
          let clazz = tgt.classList;
          if (clazz.contains("note") || clazz.contains("pinyin")) {
            let notesel = this.getNoteSelection(tgt);
            sel = {
              scope: notesel.text.length > 1 ? NoteScope.Word : NoteScope.Char,
              content: notesel.text,
              el: tgt,
              event: event,
              line: Number(linenum),
              spos: notesel.spos,
              epos: notesel.epos 
            };
          }
        } else {
          let selectedText = getSelectionText();
          // TODO: 应当遍历所有父节点，直到找到一个class="para"的节点
          let para = event.target.parentNode;
          let paraid = para.id;
          // TODO：处理跨句选择转化为多个完整句子的情形。
          if (selectedText) {
            let wordsel = this.getWordSelection();
            // 如果是选择一段文字，这里只支持单句之内的选择，如单词、单字等，跨句的情况不作考虑，当跨句时，应当转化为多句选择。
            sel = {
              scope: NoteScope.Word,
              content: wordsel.text,
              el: line,
              event: event,
              paraid: paraid,
              line: Number(linenum),
              spos: wordsel.spos,
              epos: wordsel.epos,
            };
          } else {
            // 如果只是单选一行
            sel = {
              scope: NoteScope.Line,
              id: line.id,
              content: line.origText || line.textContent,
              el: line,
              event: event,
              paraid: paraid,
              line: Number(linenum),
            };
          }
        }
        //console.log("selected:", JSON.stringify(sel));
        self.$emit("select", sel);
      };
    },
  },
};
</script>